import React, { Component } from 'react'
import { Toast, NavBar } from 'react-vant';
import Ctx from './store/Ctx';
import { Cell, Typography, Stepper, Checkbox, SubmitBar, Dialog, Tabs } from 'react-vant';
import { GoldCoinO } from '@react-vant/icons';

//充值记录
export default class Record extends Component {
  static contextType = Ctx

  state = {
    tapIndex: 0
  }

  //全选
  get all() {
    return this.context.list.every(item => {
      return item.sed
    })
  }
  //计算已选择的价格 sed=true num*total
  get sedTotal() {
    let { list } = this.context
    return list.reduce((p, n) => {
      if (n.sed) {
        return p + n.num * n.total
      }
      return p
    }, 0)
  }

  render() {
    /*  console.log(this.context); */
    let { tapIndex } = this.state
    let { list, changeSed, changeAllSed, del, delAll, changeNum,changeDel } = this.context

    //根据tap切换的0123 类型 去所有列表中过滤出 对应的类型数据
    let newlist = list.filter(item => {
      if (tapIndex == 0) { //全部 不包含回收站
        return !item.del
      }
      if (tapIndex == 1) {//已完成 不包含回收站
        return !item.del && item.sed
      }
      if (tapIndex == 2) {//未完成 不包含回收站
        return !item.del && !item.sed
      }
      if (tapIndex == 3) { //只要回收站的收据
        return item.del
      }
    })

    return (
      <div>
        <NavBar
          title="充值记录"
          leftText="返回"
          onClickLeft={() => {
            //返回到首页            
            this.props.history.push('/home')
          }}
        />

        <Tabs border type='capsule' onChange={(index) => {
          this.setState({ tapIndex: index })
        }}>
          {['全部', '已完成', '未完成', '回收站'].map(item => (
            <Tabs.TabPane key={item} title={item}>
            </Tabs.TabPane>
          ))}
        </Tabs>

        <div onClick={() => {
          //删除已选择的方法
          delAll()
        }}>删除已选择</div>

        {
          newlist.map(item => {
            return <Cell
              center
              key={item.id}
              title={<>
                <p>{item.title}</p>
                <Stepper
                  min={1}
                  value={item.num}
                  onChange={v => { //++--都执行 形参=num值
                    //执行++--的num操作
                    changeNum(item.id, v)

                  }} />
                <span>单价:{item.total}</span>
              </>}
              label={item.time}
              icon={<>
                <Checkbox checked={item.sed} onChange={() => { changeSed(item.id) }} />
                <GoldCoinO color='orange' style={{ fontSize: '24px' }} />
              </>}
              value={<>
                {/* 单个删除 */}
                <p onClick={() => {
                  Dialog.confirm({
                    title: '提示',
                    message: '确定删除吗',
                    onConfirm: () => {
                      //确认删除
                      del(item.id)
                    },
                  }).catch(err => { })
                }}>删除</p>
                <p onClick={()=>{
                  //放到回收站 假删除
                  changeDel(item.id)
                }}>删除2</p>
                <Typography.Text type="danger">￥{item.alltotal}</Typography.Text>
              </>
              }
              isLink
            />
          })
        }

        < div >
          <SubmitBar
            price={this.sedTotal * 100}
            buttonText="提交订单"
          >
            <Checkbox checked={this.all} onChange={(e) => { changeAllSed(e) }}>全选</Checkbox>
          </SubmitBar>
        </div>
      </div >
    )
  }
}
